<template>
<!-- 总容器 -->
<div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>健康档案</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <section>
            <img src="../assets/img/report.png">
            <ul>
                <li v-for="(report, index) in reports" :key="index">
                    <div class="left">
                        <i class="fa fa-file-text-o"></i>
                        <div>
                            <p>{{ report.orderDate }} 体检报告</p>
                            <p>{{ report.hospitalname }}</p>
                        </div>
                    </div>
                    <div class="right" @click="goToReport(report)">
                        <i class="fa fa-angle-right"></i>
                    </div>
                </li>
            </ul>
        </section>
        
        <div class="bottom-ban"></div>
        <footer>
            <ul>
                <li @click="()=>{router.push('/hospital')}">
                    <i class="fa fa-home"></i>
                    <p>云医院</p>
                </li>
                <li @click="()=>{router.push('/setmeal')}">
                    <i class="fa fa-opencart"></i>
                    <p>商城</p>
                </li>
                <li @click="()=>{router.push('/index')}">
                    <i class="fa fa-compass"></i>
                    <p>发现</p>
                </li>
                <li @click="()=>{router.push('/personal')}">
                    <i class="fa fa-user"></i>
                    <p>我</p>
                </li>
            </ul>
        </footer>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import router from '@/router/index.js';
// import { getReportlistApi } from '../api/Report'
import axios from "../plugins/axios.js";

var userId = JSON.parse(sessionStorage.getItem("userInfo")).userid;
const reports = ref([]);

const fetchReports = async () => {
  try {
    const response = await axios.get('http://localhost:9000/report/list?userid=' + userId);
    if (response.data.code === 200) {
      reports.value = response.data.data;
    }
  } catch (error) {
    console.error('Error fetching reports:', error);
  }
};

const goToReport = (report) => {
    sessionStorage.setItem('reportitem',JSON.stringify(report));
    router.push('/report');
};

onMounted(fetchReports);
</script>

<style src="../assets/css/reportlist.css" scoped>
</style>